<template>
    <div class="box">
      <div class="header">
        <a href="javascript:;" onClick="javascript:history.back(-1);">
          <img src="/static/lyl/BMQD-1.png" alt="">
        </a>
        <span>我的二维码</span>
        <img @click="change2()" src="/static/lyl/BMQD-3.png" alt="">
      </div>
      <div class="content">
        <div class="tou">
          <router-link to="/mine">
            <img :src="src" alt="">
            <span>{{nis}}</span>
          </router-link>
        </div>
        <img src="/static/lyl/158.png" alt="">
        <p>扫一扫上面二维码图案，邀请好友注册吧</p>
      </div>

      <div @click="change2()" v-if="com" class="footer">
        <ul @click.stop>
          <li>分享二维码</li>
          <li>保存到手机</li>
          <li @click="change2()">取消</li>
        </ul>
      </div>
    </div>
</template>

<script>
  import faker from 'faker'
    export default {
      name: "Erwei",
      data(){
        return {
          src:faker.image.avatar(),
          com:false
        }
      },
      methods:{
        change2(){
          this.com = !this.com;
        }
      },
      computed:{
        nis(){
          return this.$store.state.nichen;
        }
      }
    }
</script>

<style scoped>
   .header{
     padding: 2.7rem 2rem;
     background: #e53e42;
     display: flex;
     justify-content: space-between;
   }
   .header a img{
      width: 2.1rem;
      height: 3.8rem;
   }
   .header img:nth-child(3){
     width: 3.5rem;
     height: 1rem;
     margin-top: 1.6rem;
   }
   .header span{
     font-size: 36px;
     color: #fff;
   }
   .content{
     padding: 4.8rem 2rem 0 2rem;
     background: #f2f2f2;
     height: 100%;
   }
   .content .tou a img{
     display: inline-block;
     width: 10rem;
     height: 10rem;
     border-radius: 50%;
     margin-right: 1rem;
   }
   .content .tou a span:nth-child(2){
     font-size: 30px;
     line-height: 10rem;
     vertical-align: top;
     background: #f2f2f2;
   }
   .tou{
     margin-bottom: 7rem;
   }
   .content>img{
     display: block;
     width: 28.6rem;
     height: 28.2rem;
     margin: auto;
   }
   .content>p{
     margin-top: 5.8rem;
     text-align: center;
     font-size: 30px;
     line-height: 36px;
   }

   .box{
     position: relative;
     background: #f2f2f2;
   }
   .box .footer{
     position: absolute;
     top: 0;
     left: 0;
     width: 72rem;
     height: 100%;
     background: rgba(0,0,0,0.5);
   }
   .box .footer ul{
     width: 100%;
     position: absolute;
     bottom: 0;
     left: 0;
     background: #fff;
   }
   .box .footer ul li{
     height: 10rem;
     border-bottom: 1px solid #ccc;
     text-align: center;
     line-height: 10rem;
     font-size: 28px;
   }
</style>
